<script setup>
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import {getBuToPagePath, toAppletPage, toMiniAppRedPage} from "../../utils/utils";
import {useUserInfoStore} from "../../stores/modules/userInfo";
const userInfoStore = useUserInfoStore()
import {onMounted, onUnmounted, ref, watch} from "vue";
import {onShareAppMessage, onShow} from "@dcloudio/uni-app";
/* #ifdef H5 */
import jweixin from "weixin-js-sdk";
/* #endif */
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import LszbgCountDown from "../../components/LszbgCountDown.vue";
import {deleteGFOrderAPI, deleteOrderAPI, getOrderProcessAPI} from "../../services/order";
const commonInfoStore = useCommonInfoStore()
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器
const userInfo = userInfoStore.userInfo
// 新用户变量
const newUser = ref()
/* const porps = defineProps({
  item: Object
}) */
const props = defineProps({item: Object, orderIndex: Number, activeMorenIndex: Number,})
const emits = defineEmits(['cancelGFOrder', 'goGFShop', 'queryGfState', 'maskLayerCheck', 'setMore'])
onShow(async () => {

})
const cancelOrder = async (item) => {
  uni.showModal({
    title: '提示',
    content: '您是否确认取消订单?',
    success: async function (res) {
      if (res.confirm) {
        emits('cancelGFOrder', item)
      }
    }
  });
}
// 删除已取消订单
const delGFOrderFun = async (data) => {
  uni.showModal( {
    title: '提示',
    content: '您是否确认删除此订单?',
    cancelText: '取消',
    confirmText: '确定',
    success: async function (res) {
      if (res.confirm) {
        let res = await deleteGFOrderAPI(data.id)
        if (res.code === 200){
          uni.showToast({
            title: '删除成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            uni.reLaunch( {
              url: '/pages/order/order'
            })
          }, 2000)
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
// 发出一个到美团下单的指令
const goGFShop = async (item) => {
  emits('goGFShop', item)
}
// 查询官返订单的状态
const queryState = async (item) => {
  emits('queryGfState', item)
}
// 美团订单页面的路径，给H使用
const mtOrderUrl = 'pages/orders/orders'
const mtAppId = 'gh_72a4eb2d4324'
const goGFPj = async (item) => {
  await toAppletPage(1, 1)
}
//倒计时计算
const format = ref("HH:mm:ss")
const findcountdown = (item) => {
  let nowTime = +new Date()
  let putTime = +new Date(item.end_time.replace(/-/g, "/"))
  return (putTime - nowTime)
}
// 图标分享事件
const showShare = ref(false)
// 获取选中分享的订单内容
const shareClickData = ref()
const H5Click = (item) => {
  uni.navigateTo( {
    url: '/pages_shopdetail/shopdetail_gf?&activeIndex=0',
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      acceptDataFromOpenedPage: function (data) {
        console.log(data)
      },
      someEvent: function (data) {
        console.log(data)
        emits('changeShop', data)
      }
    },
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('item', item)
    }
  })
}
const share = (item) => {
  console.log('商家ID', item)
  shareClickData.value = item
  /* #ifdef APP-PLUS || MP */
  showShare.value = true
  /* #endif */
  /* #ifdef H5 */
  uni.navigateTo( {
    url: '/pages_shopdetail/shopdetail_order_gf?&activeIndex=0',
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      acceptDataFromOpenedPage: function (data) {
        console.log(data)
      },
      someEvent: function (data) {
        console.log(data)
        emits('changeShop', data)
      }
    },
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('itemGf', item)
    }
  })
  /* #endif */
}

// 显示更多按钮内容
const activeIndex = ref()
const setMore = (index) => {
  if (activeIndex.value === index){
    activeIndex.value = '-1'
  }else{
    activeIndex.value = index
  }
  emits('setMore', activeIndex.value)
  console.log("activeIndex===",activeIndex.value, index)
}
// 查看详情事件
const checkDetailFun = (data) => {
  showOrderDetail.value = true
  console.log('订单id', data.id)

  getOrderProcess(data.id, data.order_type)
}
// 删除已取消订单
const delOrderFun = async (data) => {
  uni.showModal( {
    title: '提示',
    content: '您是否确认删除此订单?',
    cancelText: '取消',
    confirmText: '确定',
    success: async function (res) {
      if (res.confirm) {
        let res = await deleteGFOrderAPI(data.id)
        if (res.code === 200){
          uni.showToast({
            title: '删除成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            uni.reLaunch( {
              url: '/pages/order/order'
            })
          }, 2000)
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
// 是否显示订单详情弹窗
const showOrderDetail = ref(false)
// 获取订单进程数据
const orderProcessData = ref([])
const getOrderProcess = async (id, type) => {
  let res =  await getOrderProcessAPI(id, type)
  console.log('订单进程', res)
  orderProcessData.value = res.result
}
const popupClose = () => {
  console.log('关闭=', showShare.value)
  showShare.value = false
}
const currentIcon = ref("share-fill") //初始图标为分享
// 切换图标事件
const startImageCycle = () => {
  if (currentIcon.value === "share-fill"){
    currentIcon.value = "weixin-fill"
  } else {
    currentIcon.value = "share-fill"
  }
}
onMounted(async () => {
  setInterval(() => {
    startImageCycle()
  }, 3000)
  console.log('用户信息=', useUser.userInfo)
  // 判断是否新用户
  if (userInfoStore.isNewUser){
    newUser.value = '新用户'
  }else {
    newUser.value = '老用户'
  }
  // #ifdef H5
  // await wxShare()
  // #endif
})
watch( () => props.activeMorenIndex,(newVal, oldValue) => {
  // console.log('改变了索引=', newVal)
  activeIndex.value = newVal
})
// 抢购金额=最低消费-会员补贴
const takeMoney = ref(0)
const useUser = useUserInfoStore()

// WEIXIN转发到聊天界面onShareAppMessage
onShareAppMessage((res) => {
  let { shopName, imageUrl, maxCommission} = res.target.dataset.share
  const message = ref("您的好友给你推荐了（" + shopName + "），最高可省 ￥" + maxCommission + "元")
  return commonInfoStore.setWxShareMessage("message", message.value, useUser?.userInfo?.id, "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo?.id + "&source=2", imageUrl, 2);
  /* if (res.from === 'button'){
    console.log('分享的触发方式=', res)
    return {
      title: "您的好友给你推荐了（" + shareClickData.value.shop_name + "）" ,
      imageUrl: imageUrl || BaseImgUrl + "/share/share_bg.png",
      path: "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo.id + "source=2",
      type: 0, // 0=正式服，1=测试服，2=体验版
      success:function(res){
      //成功回调
      console.log("分享成功")
      }
    }
  } */
})
// 去领取红包
const mtRedData = ref() //美团
const handleGetRedPack = async (type) => {
  mtRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[0] : []
  console.log('店铺平台=', mtRedData.value)
  await toMiniAppRedPage(mtRedData.value)
}
// WEIXIN转发到朋友圈
const ShareTimeLine = ((res) => {
  console.log("item===",res.shop.id)
  uni.navigateTo( {
    url: '/pages_shopdetail/shopdetail_gf?id=' + res.shop.id + '&activeIndex=0' + "&orderShareShow=true"
  })
})


// 分享到微信好友
const handleShareWechat = () => {
  console.log("item===",shareClickData.value)
  uni.share({
    provider: "weixin",
    scene: "WXSceneSession",
    type: 5,
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo.id + "&source=2",
      webUrl: BaseURL + '/#/pages/kingeat/kingeat/?parent_id=' + userInfoStore.userInfo.id + "&source=2",
      // TODO
      // type: 1
    },
    href: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id + "&source=2",
    title: "您的好友给你推荐了（" + shareClickData.value.shop_name + "），预计最高返 ￥" + shareClickData.value.member_commission.maxCommission + "元",
    summary: "您的好友给你推荐了（" + shareClickData.value.shop_name + "），预计最高返 ￥" + shareClickData.value.member_commission.maxCommission + "元",
    imageUrl: shareClickData.value.picture || BaseImgUrl + "/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}
// 分享到朋友圈
const handleShareTimeline = (item) => {
  uni.share({
    provider: "weixin",
    scene: "WXSceneTimeline",
    type: 0,
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/kingeat/kingeat?parent_id=" + userInfoStore.userInfo.id ,
      webUrl: BaseURL + '/#/pages/kingeat/kingeat/?parent_id=' + userInfoStore.userInfo.id ,
      // TODO
      // type: 1
    },
    href: BaseURL + '/#/pages/kingeat/kingeat/?parent_id=' + userInfoStore.userInfo.id,
    title: "您的好友给你推荐了（" + shareClickData.value.shop_name + "），预计最高返 ￥" + shareClickData.value.member_commission.maxCommission + "元",
    summary: "您的好友给你推荐了（" + shareClickData.value.shop_name + "），预计最高返 ￥" + shareClickData.value.member_commission.maxCommission + "元",
    imageUrl: shareClickData.value.picture || BaseImgUrl + "/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}
// 复制订单号
const copy_no = (order_no) => {
  uni.setClipboardData({
    data: order_no, // e是你要保存的内容
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      })
    }
  });
}

</script>

<template>
  <view class="listOrder">
    <!-- top -->
    <view class="listTop">
      <view class="listLeft">
        <view class="order_title u-flex">
          <view class="shop_title u-flex" @click="copy_no(item?.userEventId)">
            <text class="text-Omit">订单号：</text>
            <text class="text-Omit">{{ item?.order_no }}</text>
            <image :src="BaseImgUrl + '/order/order_no_icon.png'" style="margin-left: 10rpx"></image>
          </view>
        </view>
        <!--<view class="listTitile" style="flex:1;">
          <text>{{ item.shop_name }}</text>
        </view>-->
      </view>
      <view class="listRight">
        <text v-if="item.code == 1">已过期</text>
        <text v-if="item.code == 2">已取消</text>
        <text v-if="item.code == 3 && findcountdown(item) <= 0">已过期</text>
        <text v-else-if="item.code == 3" style="color: #333333;">已报名，待下单</text>
        <text style="color: #F97632" v-if="item.code == 4">已下单{{ item.is_comment == 2 ? "" : "->待评价" }}</text>
        <text v-if="item.code == 5">已评价</text>
        <text v-if="item.code == 99">审核中</text>
        <text v-if="item.code == 6">{{ (item.code == 6) && (item.is_back == 1) ? '退款->已完成' : '任务失败' }}</text>
        <text v-if="item.code == 100">已完成</text>
      </view>
    </view>
    <!--倒计时-->
    <view class="count_down">
      <view v-if="item.code == 3 && findcountdown(item) > 0" class="count_down_content">
        <text style="padding-right: 10rpx;">请在</text>
        <lszbg-count-down
            :time="findcountdown(item)"
            :format="format"
            :isHms="false"
            :isTimeColor="true"
            :is-color="true"
            :timeColor="{color: '#FF7900',padding: '0 4rpx'}"
            :timeStyle="{background: '#FF7900',color: '#FFFFFF', fontSize: '26rpx', padding: '4rpx 6rpx', borderRadius: '10rpx'}" >
        </lszbg-count-down>
        <text style="padding-left: 10rpx;">内完成下单，否则无法获得返现</text>
      </view>
    </view>
    <view class="order_line" style="padding: 0 20rpx;"><u-line color="#EAEAEA" hairline></u-line></view>
    <!--content-->
    <view class="order_content">
      <view class="order_content_header">
        <view v-if="item.picture" style="position: relative">
          <image :src="item.picture" mode="heightFix" style="width: 176rpx;height: 176rpx;object-fit: cover;"></image>
          <!--<image style="position: absolute;top: 0;left: 0;width: 64rpx;height: 32rpx;border-radius: 0"
                 :src="BaseImgUrl+'/guanfan/home/gf_icon.png'"></image>-->
        </view>
        <image v-else
               src="https://img.alicdn.com/imgextra/i2/3829152210/O1CN01ZEkb1x1SCE3sKyaNT_!!3829152210.png"
               mode="widthFix" style="width: 100%;"></image>
      </view>
      <view class="order_content_right">
        <view class="order_shop_title ellipsis-one-line">{{ item.shop_name }}</view>
        <view class="order_shop_refund">
          <view class="order_shop_refund_content">
            <view style="display: inline-block;padding-bottom: 10rpx;">
              <view class="refund_return_box" style="display: flex;align-items: center;">
                <view class="refund_return_gf">返</view>
                <view class="place_text" style="border-radius: 0 6rpx 6rpx 0;">实付金额{{ twoFixed(item.member_commission.ratio) }}%</view>
              </view>
            </view>
            <view class="refund_return_new_warp">
              <view v-if="props.item.is_first_order == 1" class="refund_return_box_new">
                <view class="refund_return_gf_new">新人全额返</view>
                <view class="place_text">最高返{{ twoFixed(item.member_commission.maxCommission, 1) }}</view>
              </view>
              <view v-else class="refund_return_box">
                <view class="place_text">最高返{{ twoFixed(item.member_commission.maxCommission, 1) }}</view>
              </view>
            </view>
            <view v-if="item.is_comment == 1" class="shop_info_warp_type" style="display: inline-block;">图文品鉴</view>
            <view v-if="item.is_comment == 2" class="activityNum_evaluate" style="display: inline-block;">无需评价</view>
          </view>
        </view>
        <view class="order_shop_platform">
          <text>活动平台：</text>
          <view class="yysj_text_platform"><image :src="BaseImgUrl + '/home/meituan_icon.png'" mode="widthFix" style="width: 32rpx;height: 32rpx;"></image>美团</view>
       </view>
        <view class="order_shop_time">
          <text>报名时间：</text>
          <view class="yysj_text_time">{{ item.create_time ? item.create_time : '未记录时间' }}</view>
        </view>
        <!--订单完成后返款金额 -->
        <view v-if="item.code == 100" class="order_shop_time">
          <text>实际返款：</text>
          <view class="yysj_text_time" style="color: #fd7c22;">￥{{ item.back_amount }}</view>
        </view>
      </view>
      <!--<view class="content_time">
        <text>实付金额：{{ item.realCharge ? item.realCharge : 0 }}</text>
        <text>返款金额：{{
            item.back_amount ? item.back_amount : item.code == 1 || item.code == 2 || item.code == 3 || (item.code == 6) && (item.is_back == 0) ? "0" : "待结算"
          }}
        </text>
        <text>参与时间：{{ item.create_time ? item.create_time : '未记录时间' }}</text>
      </view>-->
    </view>
    <!--pingjia_box-->
    <view v-if="item.code == 3" class="pingjia_box">
      <view class="pingjia gf_mtPhoneTips">
        <text style="color: #666666;">请使用<text style="color: #FF7900;">{{ useUser.userInfo.mt_phone }}</text>手机号绑定的美团账号，在规定时 间内完成下单，</text>
        <text style="color: #222222;">订单发生退款行为，订单无返利。</text>
      </view>
    </view>
    <view class="bottom">
      <!--更多 v-if="item.code == 1 || item.code == 2 || item.code == 6 || item.code == 100 || findcountdown(item) <= 0"-->
      <view class="bottom_left">
        <view @click.stop="setMore(orderIndex)" class="bottom_left_btn">更多</view>
        <view v-if="activeIndex === orderIndex"  class="bottom_left_content">
          <!--<view class="bottom_left_sjx"><view class="sjx_content"></view></view>-->
          <!--删除订单 @click="delOrderFun(item)"-->
          <view class="triangle_box">
            <image :src="BaseImgUrl + '/order/order_sjx.png'" mode="widthFix" class="order_triangle_img" style="width: 160rpx;height: 23rpx;"></image>
            <view class="btn_details">
              <view @click="checkDetailFun(props.item)" class="btn_check">查看详情</view>
              <view v-if="props.item.is_cancel === 1 || props.item.status === 3 || props.item.status === 5" @click="delOrderFun(props.item)" class="btn_del">删除订单</view>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom_right">
        <!--#ifdef MP || APP-PLUS -->
        <!--分享功能 v-if="item.code == 100"-->
        <!--<view  class="top_share_box" @click="share(item)" >
          <view class="tishi_text">分享奖8元</view>
          <u-icon class="share_icon" ref="shareIcon" :name="currentIcon" size="26" color="#0CBB2F" bg-color="#0CBB2F"></u-icon>
        </view>-->
        <!--#endif-->
        <view v-if="item.code == 3 && findcountdown(item) > 0" @click="cancelOrder(item)" class="btn_item cancel_order">
          取消报名
        </view>
        <!--<view v-if="item.code == 1 || item.code == 2 || item.code == 100 || findcountdown(item) <= 0" @click="delGFOrderFun(item)" class="btn_item cancel_order">
          删除订单
        </view>-->
        <view @click="queryState(item)" class="btn_item">
          查询状态
        </view>
        <view v-if="item.code == 3 && findcountdown(item) > 0" @click="goGFShop(item)" class="btn_item">
          进店下单
        </view>
        <view v-if="item.code == 4 && item.is_comment == 1" @click="goGFPj(item)"  class="btn_item" style="position: relative">
          去评价
          <!-- #ifdef H5 -->
          <wx-open-launch-weapp id="launch-btn"
                                :username="mtAppId" :path="mtOrderUrl"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
          <!-- #endif -->
        </view>
        <!--分享按钮  v-if="item.code == 100"-->
        <!--<view  class="top_share_box" @click="share(item)" >
          <view class="tishi_box">
            <text class="tishi_text">分享得奖励</text>
            <image :src="BaseImgUrl + '/order/order_tip_bg01.png'" mode="widthFix" style="width: 140rpx;height: 48rpx;"></image>
          </view>
          <view style="height: 36rpx"></view>
          <view class="share_btn">分享</view>
          &lt;!&ndash;<u-icon class="share_icon" ref="shareIcon" :name="currentIcon" size="26" color="#0CBB2F" bg-color="#0CBB2F"></u-icon>&ndash;&gt;
        </view>-->
      </view>

    </view>
    <!--报名后领取红包更优惠-->
    <view v-if="item.code == 3 && findcountdown(item) > 0 && newUser == '老用户'" class="signup_red_box">
      <view class="signup_red_box_content">
        <view class="signup_red_left">
          <image :src="BaseImgUrl + '/order/red_icon01.png'" style="width: 36rpx;height: 36rpx;"></image>
          <view class="signup_red_left_text">领红包下单更优惠多省<text style="color: #FF7900;">3-9元并免审</text></view>
        </view>
        <view @click="handleGetRedPack(1)" class="signup_red_right" style="position: relative;">
          <view class="signup_red_right_btn">去领取</view>
          <!-- #ifdef H5 -->
          <wx-open-launch-weapp id="launch-btn"
                                :username="commonInfoStore.reward.order[0].original_id"
                                :path="commonInfoStore.reward.order[0]?.path"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <!--新用户首单补贴 -->
    <view v-if="item.is_first_order == 1 && newUser == '新用户' && item.code != 2" class="shop_first_tip">
      <view class="shop_process_tip_content">
        <view class="shop_first_img">
          <image :src="BaseImgUrl + '/order/red_icon01.png'" style="width: 32rpx;height: 36rpx;padding-right: 10rpx;"></image>
          <image :src="BaseImgUrl + '/order/free_icon.png'" style="width: 100rpx;height: 34rpx;padding-right: 10rpx;"></image>
        </view>
        <view class="shop_first_text_box">
          <text class="tips_text_title">首单按比例返款后</text>
          <text class="tips_text_title" style="color: #F83123;">至多再得</text>
          <text v-if="userInfo.is_member === 0">
            <text style="color: #F83123;">{{ twoFixed(item.general_commission.maxCommission) }}-返款=差额补贴红包</text>
          </text>
          <text v-if="userInfo.is_member === 1">
            <text style="color: #F83123;">{{ twoFixed(item.member_commission.maxCommission) }}-返款=差额补贴红包</text>
          </text>
        </view>
      </view>
    </view>
    <!--查看订单详情-->
    <u-popup :show="showOrderDetail" mode="bottom" round="20" bgColor="#f4f4f4"
             :safeAreaInsetBottom="false"
             :closeable="true"
             @close="showOrderDetail = false"
             :customStyle="{maxHeight: '1200rpx'}">
      <view class="order_detail">
        <view class="order_detail_box">
          <view class="order_detail_box_title">订单详情</view>
          <!--店铺名称-->
          <view class="order_detail_shop">
            <view class="listTop">
              <view class="listLeft">
                <view class="order_title u-flex">
                  <view class="shop_title u-flex" @click="copy_no(item?.order_no)">
                    <text class="text-Omit">订单号：</text>
                    <text class="text-Omit">{{ item?.order_no }}</text>
                    <image :src="BaseImgUrl + '/order/order_no_icon.png'" style="margin-left: 10rpx"></image>
                  </view>
                </view>
              </view>
              <view class="listRight">
                <!-- 点餐并且保存了订单号时显示上传凭证的倒计时 -->
                <text v-if="item.code == 1">已过期</text>
                <text v-if="item.code == 2">已取消</text>
                <text v-if="item.code == 3 && findcountdown(item) <= 0">已过期</text>
                <text v-else-if="item.code == 3" style="color: #333333;">已报名，待下单</text>
                <text style="color: #F97632" v-if="item.code == 4">已下单{{ item.is_comment == 2 ? "" : "->待评价" }}</text>
                <text v-if="item.code == 5">已评价</text>
                <text v-if="item.code == 99">审核中</text>
                <text v-if="item.code == 6">{{ (item.code == 6) && (item.is_back == 1) ? '退款->已完成' : '任务失败' }}</text>
                <text v-if="item.code == 100">已完成</text>
              </view>
            </view>
            <view class="order_line"><u-line color="#EAEAEA" hairline></u-line></view>
            <view class="order_content" style="padding-bottom: 0">
              <view class="order_content_header">
                <view v-if="item.picture" style="position: relative">
                  <image :src="item.picture" mode="heightFix" style="width: 176rpx;height: 176rpx;object-fit: cover;"></image>
                  <!--<image style="position: absolute;top: 0;left: 0;width: 64rpx;height: 32rpx;border-radius: 0"
                         :src="BaseImgUrl+'/guanfan/home/gf_icon.png'"></image>-->
                </view>
                <image v-else
                       src="https://img.alicdn.com/imgextra/i2/3829152210/O1CN01ZEkb1x1SCE3sKyaNT_!!3829152210.png"
                       mode="widthFix" style="width: 100%;"></image>
              </view>
              <view class="order_content_right">
                <view class="order_shop_title ellipsis-one-line">{{ item.shop_name }}</view>
                <view class="order_shop_refund">
                  <view class="order_shop_refund_content">
                    <view style="display: inline-block;padding-bottom: 10rpx;">
                      <view class="refund_return_box" style="display: flex;align-items: center;">
                        <view class="refund_return_gf">返</view>
                        <view class="place_text" style="border-radius: 0 6rpx 6rpx 0;">实付金额{{ twoFixed(item.member_commission.ratio, 1) }}%</view>
                      </view>
                    </view>
                    <view  class="refund_return_new_warp">
                      <view v-if="props.item.is_first_order == 1" class="refund_return_box_new">
                        <view class="refund_return_gf_new">新人全额返</view>
                        <view class="place_text">最高返{{ twoFixed(item.member_commission.maxCommission, 1) }}</view>
                      </view>
                      <view v-else class="refund_return_box">
                        <view class="place_text">最高返{{ twoFixed(item.member_commission.maxCommission, 1) }}</view>
                      </view>
                    </view>
                    <view v-if="item.is_comment == 1" class="shop_info_warp_type" style="display: inline-block;">图文品鉴</view>
                    <view v-if="item.is_comment == 2" class="activityNum_evaluate" style="display: inline-block;">无需评价</view>
                  </view>
                </view>
                <view class="order_shop_platform">
                  <text>活动平台：</text>
                  <view class="yysj_text_platform"><image :src="BaseImgUrl + '/home/meituan_icon.png'" mode="widthFix" style="width: 32rpx;height: 32rpx;"></image>美团</view>
                </view>
                <view class="order_shop_time">
                  <text>报名时间：</text>
                  <view class="yysj_text_time">{{ item.create_time ? item.create_time : '未记录时间' }}</view>
                </view>
              </view>
            </view>
          </view>
          <!--订单进程步骤条-->
          <view class="order_detail_steps">
            <scroll-view scroll-y="true" style="max-height: 680rpx; white-space: nowrap;">
              <view class="steps_content">
                <view v-for="(itemProcess, index) in orderProcessData" :key="index" class="steps_item" :class="index === 0 ? 'steps_zero' : ''">
                  <view class="steps_time">
                    <view v-if="index === 0" class="steps_round_icon"><image :src="BaseImgUrl + '/order/order_process_icon.png'" mode="widthFix" style="width: 100%;"></image></view>
                    <view v-else class="steps_round"></view>
                    <view class="steps_time_text">{{ itemProcess.create_time }}</view>
                  </view>
                  <view class="steps_title">{{ itemProcess.status_text }}</view>
                  <view v-if="itemProcess.reason" class="steps_desc">{{ itemProcess.reason }}</view>
                </view>
              </view>
              <!--#ifdef H5-->
              <view style="height: 110rpx;"></view>
              <!--#endif-->
            </scroll-view>
          </view>
        </view>
      </view>
    </u-popup>
    <!--订单按钮分享-->
    <up-popup :show="showShare" mode="bottom" @close="popupClose" :closeable="true" round="10" :safeAreaInsetBottom="false">
      <view class="share_box">
        <view class="share_top">
          <view class="share_top_bg"><image :src="BaseImgUrl + '/share/share_top_bg.png'" mode="widthFix" style="width: 100%;"></image></view>
          <view class="share_top_warp">
            <view class="share_top_warp_title">分享店铺 赚现金奖励</view>
            <view class="share_top_warp_subtitle">每邀请 <text style="color: #FF3230">1</text> 位新用户下单，你最少可获得 <text style="color: #FF3230">3元</text> 现金奖励</view>
            <view class="share_top_warp_content">
              <view class="share_top_warp_content_item">
                <view style="position: relative;margin-top: 30rpx;color:#FA642B;min-height: 268rpx">
                  <image :src="BaseImgUrl + '/share/yqjl@2x.png'"
                         style="width: 650rpx;height: 268rpx;position: absolute"></image>
                  <view class="u-flex" style="position: relative;justify-content: flex-start;align-items: flex-start">
                    <view style="text-align: center;flex: 1;margin-top: 20rpx">
                      <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                        ￥
                        <text style="font-size: 48rpx">3</text>
                      </view>
                      <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                        邀请1人
                      </view>
                    </view>
                    <view style="text-align: center;flex: 1;margin-top: 20rpx">
                      <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                        ￥
                        <text style="font-size: 48rpx">5</text>
                      </view>
                      <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                        邀请2-5人
                      </view>
                    </view>
                    <view style="text-align: center;flex: 1;margin-top: 20rpx">
                      <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                        ￥
                        <text style="font-size: 48rpx">8</text>
                      </view>
                      <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                        邀请≥6人
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="wechat_box">
          <!-- #ifdef MP -->
          <view class="small_box" >
            <button class="complete1" open-type="share"
                    :data-share="{
                'shopName': item.shop_name,
                'imageUrl': item.picture,
                'maxCommission': item.general_commission.maxCommission,
              }"
            >
              <view class="icon">
                <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
              </view>
              <view class="name">微信好友</view>
            </button>
          </view>
          <!--<view class="small_box" @click="ShareTimeLine(item)">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
            </view>
            <view class="name">朋友圈</view>
          </view>-->
          <view class="small_box">
            <button class="complete1" open-type="share"
                    :data-share="{
                'shopName': item.shop_name,
                'imageUrl': item.picture,
                'maxCommission': item.general_commission.maxCommission,
              }"
            >
              <view class="icon">
                <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
              </view>
              <view class="name">分享链接</view>
            </button>
          </view>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <view class="small_box" @click="handleShareWechat(item)">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
            </view>
            <view class="name">微信好友</view>
          </view>
          <!--<view class="small_box" @click="handleShareTimeline(item)">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
            </view>
            <view class="name">朋友圈</view>
          </view>-->
          <!--<view class="small_box" @click="handleSavePhoto()">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/upload_icon.png'"></image>
            </view>
            <view class="name">保存图片</view>
          </view>-->
          <view class="small_box" @click="handleShareWechat(item)">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
            </view>
            <view class="name">分享链接</view>
          </view>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <!--<view class="small_box" @click="h5Share(item)">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
            </view>
            <view class="name">微信好友</view>
          </view>-->
          <!--<view class="small_box" @click="h5Share(item)">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
            </view>
            <view class="name">朋友圈</view>
          </view>-->
          <!--<view class="small_box" @click="h5Share(item)">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
            </view>
            <view class="name">分享链接</view>
          </view>-->
          <!-- #endif -->
        </view>
      </view>
      <!--#ifdef H5-->
      <view style="height: 132rpx;"></view>
      <!--#endif-->
    </up-popup>
  </view>
</template>
<style lang="scss">
.u-count-down__text{
  font-size: 26rpx;
  color: #F97632
}
</style>
<style lang="scss">
.u-count-down__text{
  font-size: 26rpx;
  color: #F97632
}
.tabs {
  padding: 0 10rpx;
  background-color: #FFFFFF;
  box-shadow: #F6F6F6 0 2rpx 8rpx 2rpx;
}

.notice_box {
  background-color: #FFFBEE;
  display: flex;
  box-sizing: border-box;
  padding: 10rpx 30rpx;
  margin-bottom: 20rpx;

  image {
    width: 52rpx;
    height: 52rpx;
    margin-right: 10rpx;
  }

  .desc_text {
    flex: 1;
    display: inline-block;
    font-size: 25rpx;
    color: #FC754A;
    line-height: 45rpx;
  }
}

.orderTotal {
  //height: auto;
}

.orderList {
  margin: 30rpx auto 0;
  width: 689rpx;
  background: #fff;
  padding-bottom: 6rpx;
  border-radius: 10rpx;

  &.scoreList {
    box-sizing: border-box;
    padding: 20rpx;

    .name_status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #E6E6E6;

      .name {
        font-size: 28rpx;
        color: #000;
        display: flex;
        align-items: center;

        &:before {
          content: '';
          display: inline-block;
          width: 40rpx;
          height: 40rpx;
          background: url('https://lsz.lszbg.com/imgs/old/pro_icon.png') no-repeat center center / 100% 100%;
          margin-right: 5rpx;
        }
      }

      .status {
        font-size: 28rpx;
        color: #FE5414;

        &.hui_status {
          color: #666;
        }
      }
    }

    .card_content {
      display: flex;
      box-sizing: border-box;
      padding: 30rpx 0;
      border-bottom: 1px solid #E6E6E6;

      .l_img {
        width: 160rpx;
        height: 120rpx;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .c_text {
        margin-left: 24rpx;

        .name {
          font-size: 28rpx;
          color: #333;
        }

        .jf_text {
          font-size: 24rpx;
          color: #FE5414;
          font-weight: bold;
          margin-top: 20rpx;

          text {
            font-size: 36rpx;
          }
        }
      }
    }

    .time_btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 34rpx;
      box-sizing: border-box;
      padding-bottom: 20rpx;

      .time {
        font-size: 24rpx;
        color: #999;
      }

      .r_btns {
        display: flex;
        flex: 1;
        justify-content: flex-end;

        .btn {
          height: 54rpx;
          border-radius: 6rpx;
          line-height: 54rpx;
          text-align: center;
          margin-left: 20rpx;
          font-size: 24rpx;
          box-sizing: border-box;
          padding: 0 30rpx;

          &.cancel {
            border: 1px solid #E3E3E3;
            color: #999;
          }

          &.pay {
            background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
            color: #fff;
          }
        }
      }
    }
  }
}

.listLeft {
  display: flex;
  align-items: center;
  flex: 1;
  .order_title {
    align-items: center;
    justify-content: space-between;

    .shop_title {
      align-items: center;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 6rpx;
      }

      text {
        color: #999999;
        font-size: 24rpx;
        -webkit-line-clamp: 1;
      }
    }

    .status {
      flex: 1;
      text-align: right;
      font-size: 24rpx;
      .color1 {
        color: #FF4E0D;
      }
      .color2 {
        color: #00AA3B;
      }
      .color3 {
        color: #999999;
      }
    }
  }
}

.elemtag {
  background-color: #17aeff;
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 24rpx;
  text-align: center;
  padding: 2rpx 10rpx;
  margin-right: 10rpx;
  flex: 1;
}

.listTitile {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listTitile text {
  font-size: 30rpx;
  color: #111111;
  font-weight: bold;
}

.listTitile image {
  width: 11rpx;
  height: 22rpx;
}

.listRight {
  float: right;
  font-size: 24rpx;
  color: #999999;

  .time_d {
    font-size: 26rpx;
    color: #FF3819;
    font-weight: bold;
  }
}

.listTop {
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listOrder {
  position: relative;
}
/* 倒计时css */
.count_down{
  padding: 0 20rpx;
  .count_down_content{
    padding-bottom: 20rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666666;

  }
}
/* content */
.order_content {
  // height: 176rpx;
  padding: 20rpx;
  display: flex;
  .order_content_header {
    overflow: hidden;
    width: 176rpx;
    height: 176rpx;
    border-radius: 20rpx;

  }
  .order_content_right {
    flex: 1;
    padding-left: 10rpx;
    .order_shop_title{
      font-size: 28rpx;
      color: #333333;
      line-height: 50rpx;
      margin-bottom: 10rpx;
    }
    .order_shop_refund{
      display: flex;
      align-items: center;
      padding-bottom: 10rpx;
      .order_shop_refund_content{
        /* height: 50rpx;
        display: flex;
        align-items: center; */
        .refund_return_new_warp{
          display: inline-block;
          padding-bottom: 10rpx;
          /* #ifdef h5 */
          margin-left: 10rpx;
          /* #endif */
        }
        .refund_return_box_new{
          height: 36rpx;
          line-height: 36rpx;
          padding: 2rpx 2rpx 2rpx 10rpx;
          display: flex;
          align-items: center;
          border-radius: 8rpx;
          background: #fd7c22;
          .refund_return_gf_new{
            color: #fff;
            font-size: 24rpx;
            padding-right: 10rpx;
          }
          .place_text{
            padding: 0 10rpx;
            border-radius: 0 6rpx 6rpx 0;
            color: #FD7C22;
            font-size: 22rpx;
            text-align: center;
            background: #FFFFFF;
          }
        }
        .refund_return_box{
          height: 36rpx;
          line-height: 36rpx;
          display: flex;
          align-items: center;
          border: 1px solid #FD7C22;
          border-radius: 8rpx;
          background: #fd7c22;
          .refund_return_gf{
            color: #fff;
            font-size: 24rpx;
            text-align: center;
            padding-left: 10rpx;
            padding-right: 10rpx;
          }
          .place_text{
            padding: 0 10rpx;
            border-radius: 0 6rpx 6rpx 0;
            color: #FD7C22;
            font-size: 22rpx;
            text-align: center;
            background: #FFFFFF;
          }
        }
          .shop_info_warp_type{
            padding: 0 10rpx;
            height: 36rpx;
            line-height: 36rpx;
            font-size: 22rpx;
            color: #FF4444;
            border: 2rpx solid #FF4444;
            border-radius: 6rpx;
            text-align: center;
            margin-left: 10rpx;
          }
          .activityNum_evaluate{
            height: 36rpx;
            line-height: 36rpx;
            font-size: 22rpx;
            color: #2DB327;
            text-align: center;
            padding: 0 10rpx;
            background: #F5FFF5;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 2rpx solid #74D87F;
            margin-left: 10rpx;
          }
          .shop_no_demand{
            font-size: 22rpx;
            color: #999999;
            text-align: center;
            padding: 4rpx 10rpx;
            background: #F5FFF5;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 2rpx solid #E1E1E1;
            margin-left: 10rpx;
          }


      }
      .order_shop_item{
        font-size: 24rpx;
        line-height: 34rpx;
      }
      .order_shop_evaluate{
        font-size: 22rpx;
        line-height: 36rpx;
        color: #FF4444;
        text-align: center;
        padding: 2rpx 10rpx;
        border: 2rpx solid #FF4444;
        background: #FFFFFF;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-left: 10rpx;
      }
      .order_shop_noEvaluate{
        font-size: 22rpx;
        line-height: 36rpx;
        color: #2DB327;
        text-align: center;
        padding: 2rpx 10rpx;
        background: #F5FFF5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #74D87F;
        margin-left: 10rpx;
      }
    }
    .order_shop_platform{
      font-size: 24rpx;
      color: #888888;
      padding-bottom: 10rpx;
      display: flex;
      .yysj_text_platform{
        padding-left: 10rpx;
        display: flex;
      }
    }
    .order_shop_time{
      font-size: 24rpx;
      color: #888888;
      line-height: 34rpx;
      display: flex;
    }
  }
}

.content_header {
  float: left;
  margin: 21rpx 17rpx 0 0;
  overflow: hidden;
  width: 120rpx;
  height: 120rpx;
  border: 1rpx solid #eee;
  border-radius: 20rpx;
}

.content_header image {
  width: 120rpx;
  height: 120rpx;
}

.content_time {
  display: inline-block;
}

.content_time text:first-child {
  margin-top: 26rpx;
  font-size: 24rpx;
  color: #111111;
}

.content_time text {
  line-height: 40rpx;
  display: block;
  font-size: 24rpx;
  color: #111111;
}

/* bottom */
.bottom {
  // margin-top: 20rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .bottom_left{
    width: 160rpx;
    position: relative;
    z-index: 10;
    .bottom_left_btn{
      font-size: 26rpx;
      color: #999999;
      line-height: 36rpx;
      padding: 16rpx 20rpx;
    }
    .bottom_left_content{
      width: 100%;
      transition: height 0.3s ease; /* 平滑过渡效果 */
      position: absolute;
      left: 10rpx;
      top: 60rpx;
      z-index: 10;
      .triangle_box{
        position: relative;
      }
      .bottom_left_sjx{
        width:0;
        height:0;
        border-width:0 24rpx 24rpx;
        border-style:solid;
        border-color:transparent transparent #F0F0F0;/*透明 透明  灰*/
        border-radius: 50rpx;
        margin-left: 10rpx;
        position:relative;
        z-index: 10;
        .sjx_content{
          display:block;
          width:0;
          height:0;
          border-width:0 22rpx 22rpx;
          border-style:solid;
          border-color:transparent transparent #FFFFFF;/*透明 透明  黄*/
          border-radius: 50rpx;
          position:absolute;
          top:2rpx;
          left:-22rpx;
        }
      }
      .order_triangle_img{
        position: relative;
        z-index: 12;
      }
      .btn_details{
        position: absolute;
        top: 24rpx;
        left: 0;
        right: 0;
        z-index: 11;
        background: #FFFFFF;
        border-radius: 10rpx;
        border: 2rpx solid #F0F0F0;
        box-shadow: 0 4rpx 10rpx 0 rgba(0,0,0,0.1);
        .btn_del{
          height: 60rpx;
          line-height: 60rpx;
          font-size: 24rpx;
          color: #3D3D3D;
          background: #FFFFFF;

          border-radius: 16rpx;
          text-align: center;
        }
        .btn_check{
          height: 60rpx;
          line-height: 60rpx;
          font-size: 24rpx;
          color: #3D3D3D;
          background: #FFFFFF;
          // box-shadow: 0 4rpx 10rpx 0 rgba(0,0,0,0.1);
          border-radius: 16rpx;
          text-align: center;
        }
      }
    }
  }
  .bottom_right{
    width: calc(100% - 160rpx);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn_item {
      margin-left: 20rpx;
      display: inline-block;
      font-size: 26rpx;
      line-height: 60rpx;
      text-align: center;
      color: #F97632;
      width: 160rpx;
      height: 60rpx;
      border: 1rpx solid #F97632;
      border-radius: 50rpx;
      box-sizing: border-box;
    }
    .btns_box {
      margin-left: 20rpx;
      display: inline-block;
      font-size: 22rpx;
      line-height: 60rpx;
      text-align: center;
      color: #fff;
      width: 160rpx;
      height: 60rpx;
      border-radius: 8rpx;
      box-sizing: border-box;
      margin-top: 10rpx;
      background: #fff linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
    }
    /* 取消订单 */
    .cancel_order{
      font-size: 26rpx !important;
      color: #666666 !important;
      border: 2rpx solid #E7E7E7 !important;
      background: #FFFFFF !important;
    }
    .btn_item:last-child {
      border: 0;
      color: #fff;
      width: 160rpx;
      height: 60rpx;
      background: linear-gradient( 270deg, #FF7900 0%, #FF7900 100%);
    }

  }
}
/* 报名后领取红包更优惠css */
.signup_red_box{
  height: 62rpx;
  padding: 30rpx 6rpx 0 6rpx;
  .signup_red_box_content{
    width: 100%;
    height: 62rpx;
    line-height: 62rpx;
    background: linear-gradient( 270deg, #FFFFFF 0%, #FFF1F1 100%);
    border-radius: 0rpx 0rpx 16rpx 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .signup_red_left{
      padding-left: 10rpx;
      display: flex;
      align-items: center;
      .signup_red_left_text{
        padding-left: 10rpx;
        font-size: 22rpx;
        color: #3D3D3D;
      }
    }
    .signup_red_right{
      display: flex;
      align-items: center;
      padding-right: 20rpx;
      .signup_red_right_btn{
        width: 100rpx;
        height: 40rpx;
        line-height: 40rpx;
        color: #FF7900;
        font-size: 24rpx;
        text-align: center;
        border-radius: 8rpx;
        border: 2rpx solid #FF7900;
        background: #FFFFFF;
      }
    }
  }
}
/* 首单返利提示css */
.shop_first_tip{
  min-height: 62rpx;
  margin: 30rpx 6rpx 0;
  border-radius: 16rpx;
  color: #666666;
  background: linear-gradient( 270deg, #FFFFFF 0%, #FFF1F1 100%);
  .shop_process_tip_content{
    display: flex;
    align-items: center;
    padding: 10rpx 12rpx;
    .shop_first_img{
      width: 160rpx;
    }
    .shop_first_text_box{
      flex: 1;
      color: #666666;
      font-size: 22rpx;
      border-radius: 10rpx;
      .tips_text_title{
        line-height: 34rpx;
      }
    }
  }
}
/* 头部分享css */
.bottom .top_share_box {
  width: 160rpx;
  border: 0;
  position: relative;
  display: inline-block;
  margin-left: 20rpx;
  margin-top: -38rpx;
  & .tishi_box {
    width: 140rpx;
    height: 36rpx;
    line-height: 32rpx;
    text-align: center;
    position: absolute;
    top: 0;
    left: 10rpx;
    & .tishi_text{
      color: #fff;
      font-size: 22rpx;
      position: absolute;
      top: 2rpx;
      left: 12rpx;
      z-index: 1;
    }
  }
  .share_btn{
    line-height: 58rpx;
    text-align: center;
    color: #F97632;
    width: 160rpx;
    height: 60rpx;
    font-size: 26rpx;
    border: 1rpx solid #F97632;
    border-radius: 30rpx;
    box-sizing: border-box;
    background: #FFFFFF;
  }
  @keyframes fadeInOut {
    0%{ opacity: 0; }
  }
}
.top_share_box view:last-child {
  background: none;
}
.bottom .top_share_box view:last-child {
  background: none;
}

/* 微信H5分享提示图片css */
.share_box_shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.6);
}
.share_box_shadow image {
  max-width: 80%;
  margin: 10%;
}
/* 按钮分享弹窗css */
.share_box {
  box-sizing: border-box;
  background: linear-gradient( 177deg, #FDEECF 1%, #FFF7E4 75%);
  border-radius: 32rpx 32rpx 0 0;
  height: 700rpx;
  overflow: hidden;
  .text {
    font-size: 28rpx;
    color: #333;
  }
  .share_top{
    width: 100%;
    height: 480rpx;
    padding-bottom: 40rpx;
    position: relative;
    // background: #FFF7E4;

    .share_top_bg{
      width: 100%;
    }
    .share_top_warp{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 30rpx 40rpx;
      .share_top_warp_title{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 40rpx;
        font-weight: bold;
        color: #222222;
        text-align: center;
        margin: 10rpx 0;
      }
      .share_top_warp_subtitle{
        height: 50rpx;
        line-height: 50rpx;
        font-size: 28rpx;
        text-align: center;
      }
      .share_top_warp_content{
        width: 100%;
      }
    }
  }
  .wechat_box {
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 30rpx 0;
    background: #FFFFFF;
    border-radius: 32rpx 32rpx 0 0;
    .small_box {
      flex: 1;
      .complete1 {
        text-align: center;
        background: none;
        border: none;
      }
      & button:after {
        border: none;
        background: none;
      }
      .icon {
        width: 64rpx;
        height: 64rpx;
        margin: 0 auto;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        font-size: 26rpx;
        color: #333;
        line-height: 40rpx;
        margin-top: 16rpx;
      }
    }
  }
}

.pingjia {
  font-size: 24rpx;
  color: #555;
  line-height: 40rpx;
}

.pingjia > view:nth-child(2) {
  color: #666666;
}

.pingjia_box {
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
}

.gf_mtPhoneTips {
  padding: 10rpx 20rpx;
  background: #F4F4F4;
  border-radius: 12rpx;
  font-size: 24rpx;
}
.box-content {
  background: #F8F8F8;
  border-radius: 20rpx 20rpx 0 0;

  .box-title {
    width: 100%;
    height: 130rpx;
    line-height: 130rpx;
    align-items: center;
    text-align: center;
    font-size: 32rpx;
  }

  .box-item {
    display: flex;
    font-size: 32rpx;
    height: 120rpx;
    line-height: 120rpx;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    text-align: center;
    margin: 0 30rpx 30rpx 30rpx;
  }

  .box-item-content-name {
    flex: 1;
    text-align: left;
  }

  .to-shop {
    background: #FC4106;
    color: white;
    border-radius: 5rpx;
    font-size: 22rpx;
    margin-left: 10rpx;
    padding: 2rpx 6rpx;
  }

  .icon-content1 {
    border-radius: 50%;
    padding: 10rpx;
    margin: 0 30rpx 0 30rpx;
    background: #F8F8F8;
  }

  .icon-content {
    margin: 0 20rpx;
  }
}

.ewm-content {
  margin-top: -460rpx;
  width: 600rpx;
  height: 200rpx;
  border-radius: 20rpx 20rpx 0 0;
  background: white;

  .top-img {
    width: 600rpx;
    height: 600rpx;
    border-radius: 20rpx 20rpx 0 0;
  }

  .erm-content {
    background: white;
    border-radius: 0 0 20rpx 20rpx;

    .erm-content-name {
      background: white;
      padding: 30rpx;
      font-size: 32rpx;
      font-weight: bold;
    }

    .line {
      width: 200rpx;
      background: black;
      height: 2rpx;
      margin: 0 30rpx;
    }

    .erm-content-bottom {
      display: flex;
      font-weight: 600;
      font-size: 28rpx;
      padding: 30rpx;
      align-items: center;

      .right {
        flex: 1;
      }

      .left {
        image {
          width: 180rpx;
          height: 180rpx;
          background: #f8f8f8;
          border-radius: 50%;
        }
      }
    }
  }

  .icon-content {
    text-align: center;
    width: 68rpx;
    padding: 16rpx;
    margin: 50rpx auto auto;
    background: #f2f2f2;
    border-radius: 60rpx;
  }
}

.copy-content {
  width: 600rpx;
  border-radius: 20rpx;
  background: white;
  text-align: center;

  .bottom1 {
    .btns_box1 {
      width: 540rpx;
      height: 80rpx;
      background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
      border-radius: 50rpx;
      font-size: 26rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }

    .box-item {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      width: 370rpx;
      margin: 0 auto 38rpx;
      color: #B1B1B1;
      border-radius: 16rpx;
      text-align: center;

      .icon-content1 {
        border-radius: 50%;
        padding: 6rpx;
        background: #F8F8F8;
      }

      .box-item-content-name {
        margin-left: 10rpx;
      }
    }
  }

  .top {
    background: #f8f8f8;
    border-radius: 20rpx;
    padding: 0 30rpx 30rpx;
  }

  .top-img {
    height: 200rpx;
    width: 200rpx;
    margin: 60rpx auto auto;
    border-radius: 30rpx;
  }

  .address {
    color: #888888;
    margin-top: 20rpx;
    font-size: 26rpx;
  }

  .copy-content-center {
    .copy-content-name {
      padding: 30rpx 0 20rpx;
      font-size: 32rpx;
      font-weight: 600;
    }

    .vip-content {
      text-align: center;

      .vip_text {
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
        margin-right: 26rpx;

        text {
          color: #FE874B;
        }
      }
    }

  }

}

.desc_text1 {
  box-sizing: border-box;
  padding: 30rpx 30rpx 0;
  font-size: 30rpx;
  color: #AAAAAA;
  line-height: 56rpx;
  text-align: left;

  text {
    color: #F97632;
    text-align: left;
  }
}
/* 查看订单详情 */
.order_detail{

  .order_detail_box{
    padding: 30rpx 30rpx 0 30rpx;
    .order_detail_box_title{
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
      color: #3D3D3D;
    }
    .order_detail_shop{
      // height: 320rpx;
      background: #FFFFFF;
      padding: 0 30rpx 20rpx;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
    }
    /* 订单进程步骤条 */
    .order_detail_steps{
      height: calc(100% - 400rpx);
      background: #FFFFFF;
      padding: 30rpx 30rpx 0 30rpx;
      border-radius: 16rpx 16rpx 0 0;
      .steps_line{
        height: 100%;
        width: 2rpx;
      }
      .steps_content{
        padding-left: 20rpx;
        .steps_item{
          position: relative;
          padding-bottom: 20rpx;
          padding-left: 30rpx;
          border-left: 1rpx dashed #D9D9D9;
          .steps_time{
            position: absolute;
            top: -8rpx;
            left: -14rpx;
            display: flex;
            align-items: center;
            .steps_round{
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
              background: #FFFFFF;
              border: 2rpx solid #D3D3D3;
            }
            .steps_round_icon{
              width: 32rpx;
              height: 32rpx;
            }
            .steps_time_text{
              padding-left: 30rpx;
              font-size: 28rpx;
              color: #888888;
              line-height: 40rpx;
            }
          }
          .steps_title{
            padding-top: 40rpx;
            padding-left: 10rpx;
            padding-bottom: 20rpx;
            font-size: 26rpx;
            color: #888888;
            line-height: 40rpx;
          }
          .steps_desc{
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #FF7900;
            line-height: 40rpx;
            padding: 10rpx 20rpx;
            background: #FFF9F1;
            border-radius: 8rpx;
          }
        }
        .steps_zero{
          padding-top: 20rpx;
          & .steps_time{
            top: -4rpx;
            left: -16rpx;
          }
        }
      }
    }
  }
}
</style>
